import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import * as store from './reducers/partsSlice';
export default function App() {
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');
  const show_drop=useSelector((state) => state.show_drop);
  return (
    <div>
      <button onClick={()=>{
        dispatch(store.loadPackItems(1798));
      }}>load packitems</button>
      <button onClick={()=>{
        // if(idx) this.props.actions.loadUsePack(this.props.contacts[idx].id);
        dispatch(store.edit(null));
      }}>edit</button>
      <div >
        <button
          aria-label="Increment value"
          onClick={() => dispatch(store.partsSlice.actions.INCREMENT())}
        >
          +
        </button>
        <span>{useSelector((state) => state.value)}</span>
        <button
          
          aria-label="Decrement value"
          onClick={() => dispatch(store.actions.DECREMENT())}
        >
          -
        </button>
      </div>
      <div>
        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={e => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={() =>
            dispatch(store.actions.INCREMENTBYAMOUNT(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>
        <button
          onClick={() => dispatch(store.incrementAsync(Number(incrementAmount) || 0))}
        >
          Add Async
        </button>
        {show_drop?"show":"hide"}
        <button
          onClick={() => dispatch(store.partsSlice.actions.SHOW_DROP(true))}
        >
          show drop
        </button>
        <button
          onClick={() => dispatch(store.partsSlice.actions.SHOW_DROP(false))}
        >
          hide drop
        </button>
        <button
          onClick={() => dispatch(store.logout(true))}
        >
          log out
        </button>
      </div>
    </div>
  );
}
